<!DOCTYPE HTML>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<style>
    .queueList {
        height: 270px;
    }

    .form-group {
        width: 700px;
        text-align: center;
    }
</style>
<link th:href="@{/css/plugins/webuploader/webuploader.css}" rel="stylesheet"/>
<link th:href="@{/css/demo/webuploader-demo.css}" rel="stylesheet"/>
<link th:href="@{/ajax/libs/iCheck/custom.css}" rel="stylesheet"/>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-products-add">
        <div class="form-group">
            <div class="form-group">
                <label class="col-sm-3 control-label"><span class="must_be_color">*</span>category：</label>
                <div class="col-sm-9">
                    <select class="form-control" id="productClass" name="productClass" th:with="type=${@dict.getType('erp_product_class')}">
                        <option th:each="dict : ${type}" th:text="${dict['dictLabel']}"
                                th:value="${dict['dictValue']}"></option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label"><span class="must_be_color">*</span>type：</label>
                <div class="col-sm-9">
                    <select class="form-control" id="productType" name="productType" th:with="type=${@dict.getType('erp_product_type')}">
                        <option th:each="dict : ${type}" th:text="${dict['dictLabel']}"
                                th:value="${dict['dictValue']}"></option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label"><span class="must_be_color">*</span>mainSKU：</label>
                <div class="col-sm-9">
                    <input type="text" id="mainSKU" name="mainSKU" class="form-control" autocomplete="off">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">relevanceSKU：</label>
                <div class="col-sm-9">
                    <input type="text" name="unionSKU" class="form-control" autocomplete="off">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label"><span class="must_be_color">*</span>productName：</label>
                <div class="col-sm-9">
                    <input type="text" name="productName" class="form-control" autocomplete="off">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label"><span class="must_be_color">*</span>SIZE：</label>
                <div class="col-sm-9">
                    <input type="text" name="size" class="form-control">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">EAN：</label>
                <div class="col-sm-9">
                    <input type="text" name="eAN" class="form-control" autocomplete="off">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">remark：</label>
                <div class="col-sm-9">
                    <input type="text" name="bz" class="form-control" autocomplete="off">
                </div>
            </div>
            <div id="uploader" class="wu-example">
                <div class="queueList">
                    <div id="dndArea" class="placeholder">
                        <div id="filePicker"></div>
                    </div>
                </div>
                <div class="statusBar" style="display:none;">
                    <div class="progress">
                        <span class="text">0%</span>
                        <span class="percentage"></span>
                    </div>
                    <div class="info"></div>
                    <div class="btns">
                        <div id="filePicker2"></div>
                        <div class="uploadBtn">upload</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="form-control-static col-sm-offset-9">
                <button type="submit" class="btn btn-primary">submit</button>
                <button onclick="$.modal.close()" class="btn btn-danger" type="button">close</button>
            </div>
        </div>
    </form>
</div>
<div th:include="include::footer"></div>
<script th:src="@{/js/plugins/webuploader/webuploader.min.js}"></script>
<script th:src="@{/js/demo/webuploader-demo.js}"></script>
<!--<script th:src="@{/ajax/libs/select/select2.js}"></script>-->
<script type="text/javascript">
    var imgurl = '';
    /*    var prefix = ctx + "module/products"
        $("#form-products-add").validate({
            rules: {
                xxxx: {
                    required: true,
                },
            },
            submitHandler: function (form) {
                $.operate.save(prefix + "/add", $('#form-products-add').serialize());
            }
        });*/

    $("#form-products-add").validate({
        rules: {
            mainSKU: {
                required: true,
                remote: {
                    url: ctx + "module/products/checkMainSKU",
                    type: "post",
                    dataType: "json",
                    data: {
                        name: function () {
                            return $.trim($("#mainSKU").val());
                        }
                    },
                    dataFilter: function (data, type) {
                        if (data == "1") return true;
                        else return false;
                    }
                }
            },
            productName: {
                required: true,
            },
            size: {
                required: true,
            }
        },
        messages: {
            "mainSKU": {
                remote: "SKU已经存在"
            }
        },
        submitHandler: function (form) {
            add();
        }
    });

    function add() {
        var productClass = $("#productClass option:selected").val();
        var productType = $("#productType option:selected").val();
        var mainSKU = $("input[name='mainSKU']").val();
        var unionSKU = $("input[name='unionSKU']").val();
        var productName = $("input[name='productName']").val();
        var size = $("input[name='size']").val();
        var eAN = $("input[name='eAN']").val();
        var bz = $("input[name='bz']").val();
        var picUrl = imgurl === '' ? '' : JSON.parse(imgurl).msg;
        $.ajax({
            cache : true,
            type : "POST",
            url : ctx + "module/products/add",
            data : {
                "productClass": productClass,
                "productType": productType,
                "mainSKU": mainSKU,
                "unionSKU": unionSKU,
                "productName": productName,
                "size": size,
                "eAN": eAN,
                "bz": bz,
                "picUrl" : picUrl,
            },
            async : false,
            error : function(request) {
                $.modal.alertError("system error");
            },
            success : function(data) {
                $.operate.saveSuccess(data);
            }
        });
    }
    
    function add_product () {

    }
</script>

</body>
</html>
